import React, { useState, useEffect } from 'react'
import store from './redux/store'
import { action, addAction } from './redux/action'
export default function App () {
  console.log(store.getState(), 'state........')
  //简易版的todo
  const [list, setList] = useState(store.getState().list)
  const [value, setValue] = useState('')
  //提交的时候 获取到store中的list 把最新的value追加进去
  const addSubmit = () => {
    let newList = [...list]
    newList.push(value)
    store.dispatch(addAction(newList))
  }
  const del = (idx) => {
    let newList = list.filter((_, index) => index != idx)
    store.dispatch(addAction(newList))
  }
  //监听数据变化 渲染最新数据
  useEffect(() => {
    store.subscribe(() => {
      setList(store.getState().list)
    })
  }, [])
  return (
    <div>
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <button onClick={addSubmit}>提交</button>
      {
        list.map((item, index) => {
          return (
            <div key={index}>
              {item}
              <button onClick={() => del(index)}>X</button>
            </div>
          )
        })
      }
    </div>
  )
}

